<template>
  <div class="h-87">
    <div class="mainContent">
      <div class="screenContent">
        <div class="screenNav">
          <ul class="navList">
            <li :class="{ active: num == 0 }" style="z-index: 9999" @click="num = 0">产业园规划范围</li>
            <li :class="{ active: num == 1 }" style="z-index: 9999" @click="num = 1">陇县饲草种植基地布局示意图</li>
            <li :class="{ active: num == 2 }" style="z-index: 9999" @click="num = 2">陇县奶山羊养殖优势区域分布图</li>
          </ul>
        </div>
        <div v-show="num == 0" class="contentBox">
          <div class="layout_mapChart map1">
            <img src="../../../assets/img/industrialLayout/layout1all.png" alt="" />
            <img src="../../../assets/img/industrialLayout/layout1_Icon1.png" class="icon1" />
            <Lottie :options="defaultOptions2" class="lottileBg1" />
          </div>
          <div class="map_legend legend1">
            <ul>
              <li><span class="lengendIco" />羊乳产业核心功能区</li>
              <li><span class="lengendIco" />健康养殖示范基地</li>
              <li><span class="lengendIco" />优质饲草种植基地</li>
            </ul>
          </div>
        </div>
        <div v-show="num == 1" class="contentBox">
          <div class="layout_mapChart map2">
            <img src="../../../assets/img/industrialLayout/layout2all.png" alt="" />
          </div>
          <div class="map_legend legend2">
            <ul>
              <li><span class="lengendIco" />1万亩饲草</li>
              <li><span class="lengendIco" />2万亩饲草</li>
              <li><span class="lengendIco" />3万亩饲草</li>
              <li><span class="lengendIco" />4万亩饲草</li>
              <li><span class="lengendIco" />5万亩饲草</li>
            </ul>
          </div>
        </div>
        <div v-show="num == 2" class="contentBox">
          <div class="layout_mapChart map3">
            <img src="../../../assets/img/industrialLayout/layout3all.png" alt="" />
          </div>
          <div class="map_legend legend3">
            <ul>
              <li><span class="lengendIco" />温水优势区</li>
              <li><span class="lengendIco" />曹家湾固关优势区</li>
              <li><span class="lengendIco" />唐家庄河北优势区</li>
              <li><span class="lengendIco" />关山天成优势区</li>
              <li><span class="lengendIco" />牙科磨儿原优势区</li>
              <li><span class="lengendIco" />东风优势区</li>
              <li><span class="lengendIco" />八渡优势区</li>
            </ul>
          </div>
        </div>
      </div>
      <Lottie :options="defaultOptions" class="lottileBg" />
    </div>
  </div>
</template>

<script>
import echarts from 'echarts'
import * as animationData from '../../../utils/data.json'
import * as animationData2 from '../../../utils/data2.json'
import Lottie from '../../../vue-lottie/src/lottie.vue'

export default {
  name: 'ProductivityLaout',
  components: {
    Lottie
  },
  data() {
    return {
      num: 0,
      defaultOptions: {
        animationData: animationData.default
      },
      defaultOptions2: {
        animationData: animationData2.default
      },
      animationData2: {
        v: '5.6.4',
        fr: 29.9700012207031,
        ip: 0,
        op: 60.0000024438501,
        w: 540,
        h: 540,
        nm: 'Comp 1',
        ddd: 0,
        assets: [{ id: 'image_0', w: 30, h: 30, u: 'images/', p: '___.png', e: 0 }],
        layers: [
          {
            ddd: 0,
            ind: 1,
            ty: 2,
            nm: '核心羊.png',
            cl: 'png',
            refId: 'image_0',
            sr: 1,
            ks: {
              o: { a: 0, k: 100, ix: 11 },
              r: { a: 0, k: 0, ix: 10 },
              p: { a: 0, k: [270, 270, 0], ix: 2 },
              a: { a: 0, k: [15, 15, 0], ix: 1 },
              s: { a: 0, k: [100, 100, 100], ix: 6 }
            },
            ao: 0,
            ip: 0,
            op: 900.000036657751,
            st: 0,
            bm: 0
          },
          {
            ddd: 0,
            ind: 2,
            ty: 4,
            nm: 'Shape Layer 2',
            sr: 1,
            ks: {
              o: { a: 0, k: 60, ix: 11 },
              r: { a: 0, k: 0, ix: 10 },
              p: { a: 0, k: [270, 270, 0], ix: 2 },
              a: { a: 0, k: [0, 0, 0], ix: 1 },
              s: { a: 0, k: [12, 12, 100], ix: 6 }
            },
            ao: 0,
            shapes: [
              {
                ty: 'gr',
                it: [
                  {
                    d: 1,
                    ty: 'el',
                    s: { a: 0, k: [539.527, 539.527], ix: 2 },
                    p: { a: 0, k: [0, 0], ix: 3 },
                    nm: 'Ellipse Path 1',
                    mn: 'ADBE Vector Shape - Ellipse',
                    hd: false
                  },
                  {
                    ty: 'fl',
                    c: { a: 0, k: [0.913725490196, 0.81568627451, 0.090196078431, 1], ix: 4 },
                    o: { a: 0, k: 100, ix: 5 },
                    r: 1,
                    bm: 0,
                    nm: 'Fill 1',
                    mn: 'ADBE Vector Graphic - Fill',
                    hd: false
                  },
                  {
                    ty: 'tr',
                    p: { a: 0, k: [-0.049, -0.084], ix: 2 },
                    a: { a: 0, k: [0, 0], ix: 1 },
                    s: { a: 0, k: [100, 100], ix: 3 },
                    r: { a: 0, k: 0, ix: 6 },
                    o: { a: 0, k: 100, ix: 7 },
                    sk: { a: 0, k: 0, ix: 4 },
                    sa: { a: 0, k: 0, ix: 5 },
                    nm: 'Transform'
                  }
                ],
                nm: 'Ellipse 1',
                np: 3,
                cix: 2,
                bm: 0,
                ix: 1,
                mn: 'ADBE Vector Group',
                hd: false
              }
            ],
            ip: 0,
            op: 900.000036657751,
            st: 0,
            bm: 0
          },
          {
            ddd: 0,
            ind: 3,
            ty: 4,
            nm: 'Shape Layer 3',
            sr: 1,
            ks: {
              o: {
                a: 1,
                k: [
                  { i: { x: [0.833], y: [0.833] }, o: { x: [0.167], y: [0.167] }, t: 0, s: [60] },
                  { t: 10.0000004073083, s: [40] }
                ],
                ix: 11
              },
              r: { a: 0, k: 0, ix: 10 },
              p: { a: 0, k: [270, 270, 0], ix: 2 },
              a: { a: 0, k: [0, 0, 0], ix: 1 },
              s: {
                a: 1,
                k: [
                  {
                    i: { x: [0.833, 0.833, 0.833], y: [0.833, 0.833, 0.833] },
                    o: { x: [0.167, 0.167, 0.167], y: [0.167, 0.167, 0.167] },
                    t: 0,
                    s: [12, 12, 100]
                  },
                  { t: 10.0000004073083, s: [18, 18, 100] }
                ],
                ix: 6
              }
            },
            ao: 0,
            shapes: [
              {
                ty: 'gr',
                it: [
                  {
                    d: 1,
                    ty: 'el',
                    s: { a: 0, k: [539.527, 539.527], ix: 2 },
                    p: { a: 0, k: [0, 0], ix: 3 },
                    nm: 'Ellipse Path 1',
                    mn: 'ADBE Vector Shape - Ellipse',
                    hd: false
                  },
                  {
                    ty: 'fl',
                    c: { a: 0, k: [0.913725490196, 0.81568627451, 0.090196078431, 1], ix: 4 },
                    o: { a: 0, k: 100, ix: 5 },
                    r: 1,
                    bm: 0,
                    nm: 'Fill 1',
                    mn: 'ADBE Vector Graphic - Fill',
                    hd: false
                  },
                  {
                    ty: 'tr',
                    p: { a: 0, k: [-0.049, -0.084], ix: 2 },
                    a: { a: 0, k: [0, 0], ix: 1 },
                    s: { a: 0, k: [100, 100], ix: 3 },
                    r: { a: 0, k: 0, ix: 6 },
                    o: { a: 0, k: 100, ix: 7 },
                    sk: { a: 0, k: 0, ix: 4 },
                    sa: { a: 0, k: 0, ix: 5 },
                    nm: 'Transform'
                  }
                ],
                nm: 'Ellipse 1',
                np: 3,
                cix: 2,
                bm: 0,
                ix: 1,
                mn: 'ADBE Vector Group',
                hd: false
              }
            ],
            ip: 0,
            op: 900.000036657751,
            st: 0,
            bm: 0
          },
          {
            ddd: 0,
            ind: 4,
            ty: 4,
            nm: 'Shape Layer 4',
            sr: 1,
            ks: {
              o: {
                a: 1,
                k: [
                  { i: { x: [0.833], y: [0.833] }, o: { x: [0.167], y: [0.167] }, t: 0, s: [50] },
                  { t: 20.0000008146167, s: [30] }
                ],
                ix: 11
              },
              r: { a: 0, k: 0, ix: 10 },
              p: { a: 0, k: [270, 270, 0], ix: 2 },
              a: { a: 0, k: [0, 0, 0], ix: 1 },
              s: {
                a: 1,
                k: [
                  {
                    i: { x: [0.833, 0.833, 0.833], y: [0.833, 0.833, 0.833] },
                    o: { x: [0.167, 0.167, 0.167], y: [0.167, 0.167, 0.167] },
                    t: 0,
                    s: [12, 12, 100]
                  },
                  { t: 20.0000008146167, s: [26, 26, 100] }
                ],
                ix: 6
              }
            },
            ao: 0,
            shapes: [
              {
                ty: 'gr',
                it: [
                  {
                    d: 1,
                    ty: 'el',
                    s: { a: 0, k: [539.527, 539.527], ix: 2 },
                    p: { a: 0, k: [0, 0], ix: 3 },
                    nm: 'Ellipse Path 1',
                    mn: 'ADBE Vector Shape - Ellipse',
                    hd: false
                  },
                  {
                    ty: 'fl',
                    c: { a: 0, k: [0.913725490196, 0.81568627451, 0.090196078431, 1], ix: 4 },
                    o: { a: 0, k: 100, ix: 5 },
                    r: 1,
                    bm: 0,
                    nm: 'Fill 1',
                    mn: 'ADBE Vector Graphic - Fill',
                    hd: false
                  },
                  {
                    ty: 'tr',
                    p: { a: 0, k: [-0.049, -0.084], ix: 2 },
                    a: { a: 0, k: [0, 0], ix: 1 },
                    s: { a: 0, k: [100, 100], ix: 3 },
                    r: { a: 0, k: 0, ix: 6 },
                    o: { a: 0, k: 100, ix: 7 },
                    sk: { a: 0, k: 0, ix: 4 },
                    sa: { a: 0, k: 0, ix: 5 },
                    nm: 'Transform'
                  }
                ],
                nm: 'Ellipse 1',
                np: 3,
                cix: 2,
                bm: 0,
                ix: 1,
                mn: 'ADBE Vector Group',
                hd: false
              }
            ],
            ip: 0,
            op: 900.000036657751,
            st: 0,
            bm: 0
          },
          {
            ddd: 0,
            ind: 5,
            ty: 4,
            nm: 'Shape Layer 5',
            sr: 1,
            ks: {
              o: {
                a: 1,
                k: [
                  { i: { x: [0.833], y: [0.833] }, o: { x: [0.167], y: [0.167] }, t: 0, s: [30] },
                  { t: 30.0000012219251, s: [15] }
                ],
                ix: 11
              },
              r: { a: 0, k: 0, ix: 10 },
              p: { a: 0, k: [270, 270, 0], ix: 2 },
              a: { a: 0, k: [0, 0, 0], ix: 1 },
              s: {
                a: 1,
                k: [
                  {
                    i: { x: [0.833, 0.833, 0.833], y: [0.833, 0.833, 0.833] },
                    o: { x: [0.167, 0.167, 0.167], y: [0.167, 0.167, 0.167] },
                    t: 0,
                    s: [12, 12, 100]
                  },
                  { t: 30.0000012219251, s: [40, 40, 100] }
                ],
                ix: 6
              }
            },
            ao: 0,
            shapes: [
              {
                ty: 'gr',
                it: [
                  {
                    d: 1,
                    ty: 'el',
                    s: { a: 0, k: [539.527, 539.527], ix: 2 },
                    p: { a: 0, k: [0, 0], ix: 3 },
                    nm: 'Ellipse Path 1',
                    mn: 'ADBE Vector Shape - Ellipse',
                    hd: false
                  },
                  {
                    ty: 'fl',
                    c: { a: 0, k: [0.913725490196, 0.81568627451, 0.090196078431, 1], ix: 4 },
                    o: { a: 0, k: 100, ix: 5 },
                    r: 1,
                    bm: 0,
                    nm: 'Fill 1',
                    mn: 'ADBE Vector Graphic - Fill',
                    hd: false
                  },
                  {
                    ty: 'tr',
                    p: { a: 0, k: [-0.049, -0.084], ix: 2 },
                    a: { a: 0, k: [0, 0], ix: 1 },
                    s: { a: 0, k: [100, 100], ix: 3 },
                    r: { a: 0, k: 0, ix: 6 },
                    o: { a: 0, k: 100, ix: 7 },
                    sk: { a: 0, k: 0, ix: 4 },
                    sa: { a: 0, k: 0, ix: 5 },
                    nm: 'Transform'
                  }
                ],
                nm: 'Ellipse 1',
                np: 3,
                cix: 2,
                bm: 0,
                ix: 1,
                mn: 'ADBE Vector Group',
                hd: false
              }
            ],
            ip: 0,
            op: 900.000036657751,
            st: 0,
            bm: 0
          },
          {
            ddd: 0,
            ind: 6,
            ty: 4,
            nm: 'Shape Layer 6',
            sr: 1,
            ks: {
              o: {
                a: 1,
                k: [
                  { i: { x: [0.833], y: [0.833] }, o: { x: [0.167], y: [0.167] }, t: 0, s: [15] },
                  { t: 40.0000016292334, s: [10] }
                ],
                ix: 11
              },
              r: { a: 0, k: 0, ix: 10 },
              p: { a: 0, k: [270, 270, 0], ix: 2 },
              a: { a: 0, k: [0, 0, 0], ix: 1 },
              s: {
                a: 1,
                k: [
                  {
                    i: { x: [0.833, 0.833, 0.833], y: [0.833, 0.833, 0.833] },
                    o: { x: [0.167, 0.167, 0.167], y: [0.167, 0.167, 0.167] },
                    t: 0,
                    s: [12, 12, 100]
                  },
                  { t: 40.0000016292334, s: [55, 55, 100] }
                ],
                ix: 6
              }
            },
            ao: 0,
            shapes: [
              {
                ty: 'gr',
                it: [
                  {
                    d: 1,
                    ty: 'el',
                    s: { a: 0, k: [539.527, 539.527], ix: 2 },
                    p: { a: 0, k: [0, 0], ix: 3 },
                    nm: 'Ellipse Path 1',
                    mn: 'ADBE Vector Shape - Ellipse',
                    hd: false
                  },
                  {
                    ty: 'fl',
                    c: { a: 0, k: [0.913725490196, 0.81568627451, 0.090196078431, 1], ix: 4 },
                    o: { a: 0, k: 100, ix: 5 },
                    r: 1,
                    bm: 0,
                    nm: 'Fill 1',
                    mn: 'ADBE Vector Graphic - Fill',
                    hd: false
                  },
                  {
                    ty: 'tr',
                    p: { a: 0, k: [-0.049, -0.084], ix: 2 },
                    a: { a: 0, k: [0, 0], ix: 1 },
                    s: { a: 0, k: [100, 100], ix: 3 },
                    r: { a: 0, k: 0, ix: 6 },
                    o: { a: 0, k: 100, ix: 7 },
                    sk: { a: 0, k: 0, ix: 4 },
                    sa: { a: 0, k: 0, ix: 5 },
                    nm: 'Transform'
                  }
                ],
                nm: 'Ellipse 1',
                np: 3,
                cix: 2,
                bm: 0,
                ix: 1,
                mn: 'ADBE Vector Group',
                hd: false
              }
            ],
            ip: 0,
            op: 900.000036657751,
            st: 0,
            bm: 0
          },
          {
            ddd: 0,
            ind: 7,
            ty: 4,
            nm: 'Shape Layer 7',
            sr: 1,
            ks: {
              o: {
                a: 1,
                k: [
                  { i: { x: [0.833], y: [0.833] }, o: { x: [0.167], y: [0.167] }, t: 0, s: [15] },
                  { t: 50.0000020365418, s: [10] }
                ],
                ix: 11
              },
              r: { a: 0, k: 0, ix: 10 },
              p: { a: 0, k: [270, 270, 0], ix: 2 },
              a: { a: 0, k: [0, 0, 0], ix: 1 },
              s: {
                a: 1,
                k: [
                  {
                    i: { x: [0.833, 0.833, 0.833], y: [0.833, 0.833, 0.833] },
                    o: { x: [0.167, 0.167, 0.167], y: [0.167, 0.167, 0.167] },
                    t: 0,
                    s: [12, 12, 100]
                  },
                  { t: 50.0000020365418, s: [75, 75, 100] }
                ],
                ix: 6
              }
            },
            ao: 0,
            shapes: [
              {
                ty: 'gr',
                it: [
                  {
                    d: 1,
                    ty: 'el',
                    s: { a: 0, k: [539.527, 539.527], ix: 2 },
                    p: { a: 0, k: [0, 0], ix: 3 },
                    nm: 'Ellipse Path 1',
                    mn: 'ADBE Vector Shape - Ellipse',
                    hd: false
                  },
                  {
                    ty: 'fl',
                    c: { a: 0, k: [0.913725490196, 0.81568627451, 0.090196078431, 1], ix: 4 },
                    o: { a: 0, k: 100, ix: 5 },
                    r: 1,
                    bm: 0,
                    nm: 'Fill 1',
                    mn: 'ADBE Vector Graphic - Fill',
                    hd: false
                  },
                  {
                    ty: 'tr',
                    p: { a: 0, k: [-0.049, -0.084], ix: 2 },
                    a: { a: 0, k: [0, 0], ix: 1 },
                    s: { a: 0, k: [100, 100], ix: 3 },
                    r: { a: 0, k: 0, ix: 6 },
                    o: { a: 0, k: 100, ix: 7 },
                    sk: { a: 0, k: 0, ix: 4 },
                    sa: { a: 0, k: 0, ix: 5 },
                    nm: 'Transform'
                  }
                ],
                nm: 'Ellipse 1',
                np: 3,
                cix: 2,
                bm: 0,
                ix: 1,
                mn: 'ADBE Vector Group',
                hd: false
              }
            ],
            ip: 0,
            op: 900.000036657751,
            st: 0,
            bm: 0
          },
          {
            ddd: 0,
            ind: 8,
            ty: 4,
            nm: 'Shape Layer 1',
            sr: 1,
            ks: {
              o: {
                a: 1,
                k: [
                  { i: { x: [0.833], y: [0.833] }, o: { x: [0.167], y: [0.167] }, t: 0, s: [15] },
                  { t: 60.0000024438501, s: [0] }
                ],
                ix: 11
              },
              r: { a: 0, k: 0, ix: 10 },
              p: { a: 0, k: [270, 270, 0], ix: 2 },
              a: { a: 0, k: [0, 0, 0], ix: 1 },
              s: {
                a: 1,
                k: [
                  {
                    i: { x: [0.833, 0.833, 0.833], y: [0.833, 0.833, 0.833] },
                    o: { x: [0.167, 0.167, 0.167], y: [0.167, 0.167, 0.167] },
                    t: 0,
                    s: [12, 12, 100]
                  },
                  { t: 60.0000024438501, s: [100, 100, 100] }
                ],
                ix: 6
              }
            },
            ao: 0,
            shapes: [
              {
                ty: 'gr',
                it: [
                  {
                    d: 1,
                    ty: 'el',
                    s: { a: 0, k: [539.527, 539.527], ix: 2 },
                    p: { a: 0, k: [0, 0], ix: 3 },
                    nm: 'Ellipse Path 1',
                    mn: 'ADBE Vector Shape - Ellipse',
                    hd: false
                  },
                  {
                    ty: 'fl',
                    c: { a: 0, k: [0.913725490196, 0.81568627451, 0.090196078431, 1], ix: 4 },
                    o: { a: 0, k: 100, ix: 5 },
                    r: 1,
                    bm: 0,
                    nm: 'Fill 1',
                    mn: 'ADBE Vector Graphic - Fill',
                    hd: false
                  },
                  {
                    ty: 'tr',
                    p: { a: 0, k: [-0.049, -0.084], ix: 2 },
                    a: { a: 0, k: [0, 0], ix: 1 },
                    s: { a: 0, k: [100, 100], ix: 3 },
                    r: { a: 0, k: 0, ix: 6 },
                    o: { a: 0, k: 100, ix: 7 },
                    sk: { a: 0, k: 0, ix: 4 },
                    sa: { a: 0, k: 0, ix: 5 },
                    nm: 'Transform'
                  }
                ],
                nm: 'Ellipse 1',
                np: 3,
                cix: 2,
                bm: 0,
                ix: 1,
                mn: 'ADBE Vector Group',
                hd: false
              }
            ],
            ip: 0,
            op: 900.000036657751,
            st: 0,
            bm: 0
          }
        ],
        markers: []
      }
    }
  },
  created() {},
  methods: {}
}
</script>
<style scoped lang="scss">
.h-87 {
  margin-top: 0;
  padding: 0;
}
@keyframes warn1 {
  0% {
    transform: scale(0);
    -webkit-transform: scale(0);
    opacity: 0;
  }
  25% {
    transform: scale(0.2);
    -webkit-transform: scale(0.2);
    opacity: 0.4;
  }
  50% {
    transform: scale(0.5);
    -webkit-transform: scale(0.3);
    opacity: 0.6;
  }
  75% {
    transform: scale(0.8);
    -webkit-transform: scale(0.5);
    opacity: 0.8;
  }
  100% {
    transform: scale(1);
    -webkit-transform: scale(1);
    opacity: 1;
  }
}
.mainContent {
  width: 100%;
  height: 98%;
  margin: 10px 0 0 0;
  background: linear-gradient(90deg, rgba(36, 58, 86, 0.19) 0%, rgba(21, 82, 119, 0) 100%);
  border: 2px solid;
  border-image: linear-gradient(277deg, rgba(43, 114, 158, 0.15), rgba(65, 139, 184, 1), rgba(21, 82, 119, 0.13)) 2 2;
  position: relative;
}
.screenContent {
  height: 100%;
  z-index: 9999;
  display: flex;
  justify-content: space-between;
  margin: 60px;
  .screenNav {
    .navList {
      width: 240px;
      position: absolute;
      z-index: 9999;
      li {
        width: 240px;
        height: 40px;
        line-height: 40px;
        font-size: 16px;
        color: #fff;
        letter-spacing: 1px;
        opacity: 0.25;
        text-align: center;
        background: url(~@/assets/img/top-img/children-bg.png) no-repeat;
        background-size: 100% 100%;
        cursor: pointer;
      }
      .active {
        color: #67c5ff;
        opacity: 1;
      }
      li:nth-child(2) {
        margin: 20px 0;
      }
    }
  }
  .contentBox {
    flex: 1;
    position: absolute;
    left: 500px;
    display: flex;
    justify-content: space-between;
    .layout_mapChart {
      width: 988px;
      position: absolute;
      top: -10px;
      right: 90px;
      z-index: 999;
    }
    .map1,
    .map2,
    .map3 {
      position: relative;
    }
    .map1 {
      img {
        position: absolute;
      }
      .icon1 {
        top: 245px;
        left: 500px;
        z-index: 9999;
      }
    }
    .map_legend {
      width: 130px;
      ul {
        li {
          font-size: 14px;
          height: 20px;
          line-height: 20px;
          text-align: left;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: #e9f7ff;
          margin: 5px 0;
          span {
            display: inline-block;
            width: 10px;
            height: 10px;
            margin-right: 5px;
            background: #18d8b1;
          }
        }
        li:nth-child(2) {
          span {
            background: #3cb5ff;
          }
        }
        li:nth-child(3) {
          span {
            background: #e9d017;
          }
        }
        li:nth-child(4) {
          span {
            background: #6647ff;
          }
        }
        li:nth-child(5) {
          span {
            background: #f68e48;
          }
        }
      }
    }
    .legend1 {
      width: 150px;
      ul {
        li:nth-child(1) {
          span {
            background: #e9d017;
          }
        }
        li:nth-child(2) {
          span {
            background: #ff9d5c;
          }
        }
        li:nth-child(3) {
          span {
            background: #3fffed;
          }
        }
      }
    }
    .legend3 {
      ul {
        li:nth-child(1) {
          span {
            background: #18d8b1;
          }
        }
        li:nth-child(2) {
          span {
            background: #3cb5ff;
          }
        }
        li:nth-child(3) {
          span {
            background: #e9d017;
          }
        }
        li:nth-child(4) {
          span {
            background: #6647ff;
          }
        }
        li:nth-child(5) {
          span {
            background: #f68e48;
          }
        }
        li:nth-child(6) {
          span {
            background: #11a0bb;
          }
        }
        li:nth-child(7) {
          span {
            background: #c26cfe;
          }
        }
      }
    }
  }
}
.lottileBg {
  width: 100%;
  height: 409px;
  display: block;
  overflow: hidden;
  transform: translate3d(0, 0, 0);
  text-align: center;
  opacity: 1;
  position: absolute;
  bottom: -100px;
}
.lottileBg1 {
  transform: scale(8);
  position: absolute;
  top: 219px;
  left: 22px;
}
</style>
